<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>国内折扣详情</title>
</head>
<link rel="stylesheet" href="css/baicaijia.css">
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.js"></script>
<script src="js/template.js"></script>
<script src="lib/jquery/jquery.js"></script>
<script src="js/baicaijia.js"></script>
<script src="js/swipe.js"></script>

<script type="text/html" id="template">
    {{if result}}
    {{each result as value}}
    <li class="fl fen">{{value.title}}</li>
    {{/each}}
    {{/if}}
</script>
<script type="text/html" id="templat">
    {{if result}}
    {{each result as value}}
    <div class="line clearfix">
        <div class="fl zuo">{{#value.productImg}}</div>
        <div class=" you clearfix">
          <span class="productName">{{#value.productName}}</span>
           <div class="productPrice">{{#value.productPrice}}</div>
          <div class="productCouponRemain">{{#value.productCouponRemain}}</div>
            <div class="productCoupon">{{#value.productCoupon}}</div>
           <div class="productHref">{{#value.productHref}}</div>
        </div>
    </div>
    {{/each}}
    {{/if}}
</script>
<body>
<!--顶部-->
<div class="shen clearfix ">
    <a href="index.html" class="glyphicon glyphicon-chevron-left fl"></a>
    <div class="fl">白菜价-淘宝内部价 </div>
    <img src="images/header_app.png" alt="" class="fr">
</div>

<!--导航拉动-->
<div class="fu">
    <ul class="daohang clearfix">
    <!--<li class="fl fen"></li>-->
    </ul>
</div>

<!--商品-->
<div class="main">
        <!--<div class="line">-->
            <!--<a href=""></a><img src="" alt="" class="fl">-->
            <!--<div class="fr"></div>-->
        <!--</div>-->
</div>
<!--遮罩-->

<!--买-->

<!--底部-->
<ul class="na clearfix" role="tablist">
    <li><a href="#">登陆</span></a></li>
    <li><a href="#">注册</a></li>
    <li><a href="#">返回顶部 </a></li>
</ul>
<div class="gong">手机APP下载<a href=""> 慢慢买手机版 --掌上比价平台</a>
    <p>m.m.maimai.com</p>
</div>
</body>
<script>
    window.onload = function () {
        $.ajax({
            type: 'get',
            url: 'http://192.168.23.81:3000/api/getbaicaijiatitle',
            dataType: 'json',
            success: function (data) {
//            var titleId=data.result[0].titleId
//            console.log(titleId)
                var html = template("template", data)
                $(".daohang").html(html)
                var lis = $(".daohang").find("li")
                var width = lis.length * lis[0].offsetWidth
                $(".daohang").css("width", width + "px")
                /*通过封装的swipe插件来实现*/
                itcast.iScroll({
                    swipeDom: document.querySelector('.fu'), /*父容器对象*/
                    swipeType: 'x', /*滑动的方向*/
                    swipeDistance: 100, /*缓冲的距离*/
                })
                $.ajax({
                    type: 'get',
                    url: 'http://192.168.23.81:3000/api/getbaicaijiaproduct?' + "titleid="+0,
                    dataType: 'json',
                    success:function (data) {
                        console.log(data);
                        var html = template("templat", data);
                        $(".main").html(html);
                    }
                })
                $(".fen").each(function (i, v) {
                    v.onclick = function () {
                        var titleId = data.result[i].titleId
                        $.ajax({
                            type: 'get',
                            url: 'http://192.168.23.81:3000/api/getbaicaijiaproduct?' + "titleid=" + titleId,
                            dataType: 'json',
                            success:function (data) {
                                console.log(data);
                                var html = template("templat", data);
                                $(".main").html(html);
                            }
                        });
                    }
                })
            }
        })
    };


//$(".fen").each(function (i, v) {
//    v.onclick = function () {
//        var titleId = data.result[i].titleId;
//        $.ajax({
//            type: 'get',
//            url: 'http://192.168.23.81:3000/api/getbaicaijiaproduct?' + "titleid=" + titleId,
//            dataType: 'json',
//            success: function (data) {
//                console.log(data);}})}



</script>
</html>